<template>
    <div class="test-box">
        <div class="test-box-left">
            <div style="width: 200px; height: 100%; color: #0091ff; font-size: 24px; line-height: 48px">
                拖拽生成节点
                <div
                    style="width: 100%; height: 60px; line-height: 60px; color: #fff; cursor: pointer; border: 1px solid red; margin-bottom: 4px"
                    draggable
                    @dragstart="DndStart($event, 1)"
                >
                    node
                </div>
                <div
                    style="width: 100%; height: 60px; line-height: 60px; color: #fff; cursor: pointer; border: 1px solid red; margin-bottom: 4px"
                    draggable
                    @dragstart="DndStart($event, 2)"
                >
                    tableNode
                </div>

                功能按钮
                <br />
                <YsButton @click="Layout">Layout</YsButton>
                <YsButton @click="GetJson">GetJson</YsButton>
                <br />
                案例
                <div
                    style="width: 100%; height: 60px; line-height: 60px; color: #fff; cursor: pointer; border: 1px solid green; margin-bottom: 4px"
                    @click="UpdateX6([])"
                >
                    空画布
                </div>
                <div
                    v-for="(ex, index) in examples"
                    :key="index"
                    style="width: 100%; height: 60px; line-height: 60px; color: #fff; cursor: pointer; border: 1px solid green; margin-bottom: 4px"
                    @click="UpdateX6(ex)"
                >
                    nodeExample_{{ index }}
                </div>
            </div>
        </div>
        <div class="test-box-right">
            <XsBox ref="XsBox" :layout="''" :initData="initData" :nodeMove="nodeMove" />
        </div>
    </div>
</template>

<script>
import XsBox from '../components/XsBox.vue';
import exampleArr from '../components/example.js';
export default {
    components: { XsBox },
    data() {
        return {
            nodeInfo: {
                width: 180,
                height: 136,
                shape: 'card',
                data: {
                    title: '任意节点',
                    body: `任意渲染`,
                    nodeType: '0',
                    render: (h, param) =>
                        h(
                            'div',
                            {
                                style: {
                                    padding: '16px',
                                },
                            },
                            [
                                h('span', param.title),
                                h('div', param.body),
                                h('YsInput', {
                                    props: {
                                        value: param.title,
                                    },
                                    on: {
                                        input: v => {
                                            param.title = v;
                                        },
                                    },
                                }),
                            ]
                        ),
                },
                ports: {
                    groups: {
                        top: {
                            position: 'top',
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                        },
                        left: {
                            position: 'left',
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                        },
                        bottom: {
                            position: 'bottom',
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                        },
                        right: {
                            position: 'right',
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                        },
                        abs: {
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                                // text: {
                                //     fontSize: 12,
                                //     fill: '#888',
                                // },
                            },
                            // 文档：https://x6.antv.vision/zh/docs/api/registry/port-layout#absolute
                            position: {
                                name: 'absolute',
                            },
                        },
                    },
                    items: [
                        {
                            id: 'y_1',
                            group: 'top',
                        },
                        {
                            id: 'y_2',
                            group: 'bottom',
                        },
                        {
                            id: 'x_1',
                            group: 'left',
                        },
                        {
                            id: 'x_2',
                            group: 'right',
                        },
                        // {
                        //     id: 'abs_1',
                        //     group: 'abs',
                        //     args: {
                        //         x: '0',
                        //         y: '46',
                        //     },
                        // },
                        // {
                        //     id: 'abs_2',
                        //     group: 'abs',
                        //     args: {
                        //         x: '100%',
                        //         y: '46',
                        //     },
                        // },
                        // {
                        //     id: 'abs_3',
                        //     group: 'abs',
                        //     args: {
                        //         x: '0',
                        //         y: '100',
                        //     },
                        // },
                        // {
                        //     id: 'abs_4',
                        //     group: 'abs',
                        //     args: {
                        //         x: '100%',
                        //         y: '100',
                        //     },
                        // },
                        // {
                        //     id: 'abs_5',
                        //     group: 'abs',
                        //     args: {
                        //         x: '0',
                        //         y: '148',
                        //     },
                        // },
                        // {
                        //     id: 'abs_6',
                        //     group: 'abs',
                        //     args: {
                        //         x: '100%',
                        //         y: '148',
                        //     },
                        // },
                        // {
                        //     id: 'abs_7',
                        //     group: 'abs',
                        //     args: {
                        //         x: '0',
                        //         y: '196',
                        //     },
                        // },
                        // {
                        //     id: 'abs_8',
                        //     group: 'abs',
                        //     args: {
                        //         x: '100%',
                        //         y: '196',
                        //     },
                        // },
                        // {
                        //     id: 'abs_9',
                        //     group: 'abs',
                        //     args: {
                        //         x: '0',
                        //         y: '244',
                        //     },
                        // },
                        // {
                        //     id: 'abs_10',
                        //     group: 'abs',
                        //     args: {
                        //         x: '100%',
                        //         y: '244',
                        //     },
                        // },
                    ],
                },
            },
            nodeInfoT: {
                width: 180,
                height: 290,
                shape: 'card',
                ports: {
                    groups: {
                        top: {
                            position: 'top',
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                        },
                        left: {
                            position: 'left',
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                        },
                        bottom: {
                            position: 'bottom',
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                        },
                        right: {
                            position: 'right',
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                        },
                        abs: {
                            attrs: {
                                circle: {
                                    r: 3,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                    style: {
                                        visibility: 'hidden',
                                    },
                                },
                            },
                            position: {
                                name: 'absolute',
                            },
                        },
                    },
                    items: [
                        {
                            id: 'abs_1',
                            group: 'abs',
                            args: {
                                x: '0',
                                y: '46',
                            },
                        },
                        {
                            id: 'abs_2',
                            group: 'abs',
                            args: {
                                x: '100%',
                                y: '46',
                            },
                        },
                        {
                            id: 'abs_3',
                            group: 'abs',
                            args: {
                                x: '0',
                                y: '100',
                            },
                        },
                        {
                            id: 'abs_4',
                            group: 'abs',
                            args: {
                                x: '100%',
                                y: '100',
                            },
                        },
                        {
                            id: 'abs_5',
                            group: 'abs',
                            args: {
                                x: '0',
                                y: '148',
                            },
                        },
                        {
                            id: 'abs_6',
                            group: 'abs',
                            args: {
                                x: '100%',
                                y: '148',
                            },
                        },
                        {
                            id: 'abs_7',
                            group: 'abs',
                            args: {
                                x: '0',
                                y: '196',
                            },
                        },
                        {
                            id: 'abs_8',
                            group: 'abs',
                            args: {
                                x: '100%',
                                y: '196',
                            },
                        },
                        {
                            id: 'abs_9',
                            group: 'abs',
                            args: {
                                x: '0',
                                y: '244',
                            },
                        },
                        {
                            id: 'abs_10',
                            group: 'abs',
                            args: {
                                x: '100%',
                                y: '244',
                            },
                        },
                    ],
                },
                data: {
                    title: '自定义表头',
                    body: '自定义参数行',
                    nodeType: '0',
                    render: (h, param) =>
                        h(
                            'div',
                            {
                                style: {
                                    padding: '16px',
                                },
                            },
                            [
                                h('div', { style: { height: '60px', lineHeight: '60px' } }, param.title),
                                h('div', { style: { height: '48px', lineHeight: '48px' } }, param.body),
                                h('div', { style: { height: '48px', lineHeight: '48px' } }, param.body),
                                h('div', { style: { height: '48px', lineHeight: '48px' } }, param.body),
                                h('div', { style: { height: '48px', lineHeight: '48px' } }, param.body),
                            ]
                        ),
                },
            },
            initData: [],
            nodeMove: true,
            examples: exampleArr,
        };
    },
    mounted() {
        let obj = {
            '(': ')',
            '[': ']',
            '{': '}',
        };
        const test = str => {
            console.log(str);
            let leftArr = [];
            let res = str.split('').some(item => {
                let bool = false;
                Object.keys(obj).some(key => key == item) ? leftArr.push(item) : obj[leftArr.at(-1)] == item ? leftArr.pop() : (bool = true);
                return bool;
            });
            return !res;
        };
        console.log(test('()'), test('([])'), test('([[])'));
    },
    methods: {
        Layout() {
            this.$refs.XsBox.Layout();
        },
        DndStart(e, item) {
            this.$refs.XsBox.DndStart(e, item, item == 1 ? this.nodeInfo : this.nodeInfoT);
        },
        GetJson() {
            let json = this.$refs.XsBox.GetJson();

            console.log(json);
        },
        UpdateX6(ex) {
            this.$refs.XsBox.UpdateX6(ex);
            this.$refs.XsBox.CenterContent();
        },
    },
};
</script>

<style lang="less">
.test-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    gap: 8px;
    &-left {
        width: 200px;
    }
    &-right {
        flex: 1;
        overflow: hidden;
    }
}
</style>
